$(function () {
  //后台饭回来的数据
  var Datas;
  //左侧的滚动条
  var LeftScroll;


  init();

  function init() {
    eventList();
    setHTML();
    getCategories();
  }

  //左侧渲染数据
  function getCategories() {
    $.get(
      "categories",
      function (ret) {
        // console.log(ret);
        var html = template("left_id", {
          arr: ret.data
        });
        // console.log(html);
        $(".left ul").html(html);
        // 只有容器元素的第一个子元素可以滚动 其他被忽略
        LeftScroll = new IScroll(".left");

        Datas = ret.data;
        renderRight(0);
      }
    )
  }

  //左侧点击高亮显示
  function eventList() {
    //绑定左侧菜单的点击事件 用委托事件
    $(".left").on("tap", "li", function () {
      //1)点击到li中，获取当前点击的索引
      var index = $(this).data("index");
      // console.log(index);

      /* 当前点击的li添加上active类名达到高亮效果，其他兄弟元素移出active */
      $(this).addClass("active").siblings().removeClass("active");

      //设置当前li往上滚动置顶
      LeftScroll.scrollToElement(this);
      renderRight(index);
    })
  }

  //根据左侧的索引来渲染右侧的数据
  function renderRight(index) {
    var arr = Datas[index].children;
    // console.log(arr);
    var html2 = template("right_id", {
      arr: arr
    });
    $(".right").html(html2);
    //图片全部加载完成后初始化滚轮
    var nums = $(".right img").length;
    // console.log(nums);
    // 最后一张图片加载完成，自动执行里面的代码
    $(".right img").on("load", function () {
      nums--;
      if (nums == 0) {
        console.log("===" + nums);
        new IScroll(".right");
      }
    })
  }

  // 根据屏幕的宽度动态设置html标签的fontsize
  function setHTML() {
    // 设计的宽度 / 基础值 = 要适配的屏幕的宽度 / fz
    // fz=要适配的屏幕的宽度*基础值/设计的宽度

    // 基础值
    var baseVal = 100;
    // 设计稿的宽度
    var pageWidth = 375;
    // 当前屏幕的宽度
    var screenWidth = document.querySelector("html").offsetWidth;
    // 要设置fontsize
    var fz = screenWidth * baseVal / pageWidth;

    // 赋值给HTML标签
    document.querySelector("html").style.fontSize = fz + "px";
  }
  window.onresize = function () {
    setHTML();
  }
})